<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-03-22 17:08:41
 * @LastEditors: qingyang
 * @LastEditTime: 2022-09-08 15:29:25
-->
<template>
  <CDialog
    :title="title"
    size="small"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    @cancel="dialogVisible = false"
    :loading="loading"
  >
    <div class="edit-op-container main" v-if="dialogVisible">
      <el-form
        ref="formRef"
        style="width: 100%"
        :model="taskForm"
        :rules="obj.rules"
        label-position="top"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="taskForm.roleName" placeholder="请输入角色名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色描述" prop="roleDesc">
              <el-input
                v-model="taskForm.roleDesc"
                type="textarea"
                maxlength="255"
                show-word-limit
                resize="none"
                placeholder="请输入角色描述"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'AddOrEditRoleDialog'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref, watch, reactive } from 'vue';
import { CDialog } from '@/components/CDialog';
import { useMessage } from '@/hooks/useMessage';
import * as obj from './rules';
import { createRole, updateRole } from '@/apis/system/role';
interface SelectFillTypeDialogProps {
  visible: boolean;
  info: undefined | any;
}
const props = withDefaults(defineProps<SelectFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible', 'refresh']);

// 通过接口获取角色
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
const title = computed(() => {
  if (props.info) {
    return '编辑角色';
  } else {
    return '新增角色';
  }
});
watch(
  () => dialogVisible.value,
  visible => {
    if (visible) {
      init();
    } else {
      formRef.value?.resetFields();
    }
  }
);

const loading = ref(false);
const { createMessage } = useMessage();
let taskForm = reactive({
  roleName: '',
  roleDesc: ''
});

const formRef = ref();

function handleConfirm() {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      // 接口待测试
      if (props.info) {
        const params = { ...taskForm, roleId: props.info.id };
        updateRole(params)
          .then((res: any) => {
            createMessage.success('编辑角色成功');
            dialogVisible.value = false;
            emit('refresh');
          })
          .finally(() => {
            loading.value = false;
          });
      } else {
        createRole(taskForm)
          .then((res: any) => {
            createMessage.success('新增角色成功');
            dialogVisible.value = false;
            emit('refresh');
          })
          .finally(() => {
            loading.value = false;
          });
      }
    }
  });
}
function init() {
  loading.value = false;
  formRef.value?.resetFields();
  if (props.info) {
    taskForm.roleName = props.info.roleName;
    taskForm.roleDesc = props.info.roleDesc;
  } else {
    taskForm.roleName = '';
    taskForm.roleDesc = '';
  }
}
</script>
<style lang="scss" scoped>
.g-a-tishicaozuoshuoming {
  margin-right: 6px;
  color: #ffc129;
}
</style>
